<template>
  <view>
    <view class="title">企业标签</view>
    <view class="box" v-for="(item, index) in list" :key="index">
      <view class="box_title">{{ item.group_name }}</view>
      <view class="tags flex-row">
        <view class="notice" v-if="item.tags.length == 0">暂无标签</view>
        <view
          class="u-page__tag-item"
          v-for="(child, idx) in item.tags"
          :key="idx"
        >
          <u-tag
            :text="child.tag_name"
            :plain="!child.checked"
            type="primary"
            :name="idx"
            @click="checkboxClick(index, idx)"
          >
          </u-tag>
        </view>
      </view>
    </view>
    <view class="footer">
      <button @tap="confirm">确认</button>
      <button>取消</button>
    </view>
  </view>
</template>

<script>
import { getTagsList, editTags } from '@/config/api'
export default {
  data() {
    return {
      list: [],
      userid:
        uni.getStorageSync('clientId') || 'wm5m8oBwAA9wbLmopjNxKRdo8ey5D3uA',
      fl_userid: uni.getStorageSync('UserId') || 'toney@ikedongli.com',
    }
  },
  onLoad(options) {
    let ids = options.ids
    getTagsList().then((res) => {
      let arr = res.map((item) => {
        item.tags.map((child) => {
          if (ids.indexOf(child.id) >= 0) {
            child.checked = true
          }
        })
        return item
      })
      this.list = arr
    })
  },
  methods: {
    checkboxClick(index, idx) {
      this.$set(
        this.list[index].tags[idx],
        'checked',
        !this.list[index].tags[idx].checked
      )
    },
    async confirm() {
      let tags_id = []
      this.list.map((item) => {
        return item.tags.map((child) => {
          child.checked ? tags_id.push(child.id) : ''
        })
      })

      let res = await editTags({
        tags_id: tags_id.join(','),
        userid: this.userid,
        fl_userid: this.fl_userid,
      })

      uni.showToast({
        title: '添加标签成功!',
        duration: 2000,
      })
      setTimeout(() => {
        uni.$emit('init', { msg: '页面更新' })
        uni.navigateBack({
          delta: 1,
        })
      }, 1500)
    },
  },
}
</script>

<style lang="scss">
.title {
  color: #999;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin: 0 24rpx;
  border-bottom: 1rpx solid #e8e5e5;
}
.box {
  padding: 24rpx 24rpx 0;
  .box_title {
    font-size: 30rpx;
    margin: 20rpx 0;
  }
  .notice {
    color: #999;
  }
  .tags {
    .u-page__tag-item {
      margin-right: 20rpx;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background: #fff;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: end;
  button {
    margin: 0;
    padding: 0;
    font-size: 28rpx;
    border-radius: 8rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }
  button::after {
    border: none;
  }
  button:first-child {
    background: #3c9cff;
    color: #fff;
    width: 140rpx;
    margin-right: 40rpx;
  }
  button:last-child {
    width: 140rpx;
    border: 1rpx solid #999;
  }
}
</style>
